<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8"
          ><el-input placeholder="请输入内容">
            <el-button
              slot="append"
              icon="el-icon-search"
            ></el-button> </el-input
        ></el-col>
        <el-col :span="4">
          <el-button type="primary">添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="goodslist" border style="width: 100%">
        <el-table-column fixed prop="Id" label="#" width="100">
        </el-table-column>
        <el-table-column prop="CommodityName" label="商品名称" width="400">
        </el-table-column>
        <el-table-column prop="CommodityTypeId" label="商品类型名" width="120">
        </el-table-column>
        <el-table-column prop="MerchantId" label="供应商" width="120">
        </el-table-column>
        <el-table-column prop="CommodityMoney" label="价格(元)" width="120">
        </el-table-column>
        <el-table-column prop="isActived" label="是否上架" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isActived"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEidtDialog(scope.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeUserInfo(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 商品表格数据源
      goodslist: [
        {
          Id: 1,
          CommodityName: '中秋节月饼无蔗糖老人糕点糖尿病人孕妇木糖醇传统点心五仁黑芝麻',
          CommodityTypeId: '点心糕点',
          MerchantId: '大壮',
          CommodityMoney: '9.90',
          createdTime: '2021-08-16 15:02:32',
          remarks: '无蔗糖五仁5个，约1斤'
        }
      ]
    }
  }
}
</script>

<style scoped>
</style>
